<template>
    <ElButton @click="toggle">toggle</ElButton>
    <div :style="`width:${widthRef}px;transition:all 1s`">
     <el-menu
        :collapse="isCollapse"
        :background-color="menuColor.menuBg"
        :text-color="menuColor.menuText"
        :active-text-color="menuColor.menuActiveText"
        @open="handleOpen"
        @close="handleClose"
        class="el-menu-vertical-demo"

        style="width:100%"
    >
        <MyMenuItem :menu-item-obj="menuItemRef"></MyMenuItem>
        <MyMenuItem :menu-item-obj="menuItemRef"></MyMenuItem>
        <MyMenuItem :menu-item-obj="menuItemRef2"></MyMenuItem>
    </el-menu>
    <hr />
 
    
</div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import MyMenuItem from "../my_menu_item.vue";
import menuColor from './menu_color_variable.module.scss'

const widthRef=ref(300);
let menuItemRef=ref({
        name: "route-1",
        path: "dirL1",
        icon: "el-icon-edit",
        title: "title-1",
        children: [
            {
                name: "route-1-1",
                path: "dirL2",
                icon: "el-icon-edit",
                title: "title-1-1",
            }],
    }
);
let menuItemRef2=ref({
        name: "route-2",
        path: "dirL2",
        icon: "el-icon-edit",
        title: "title-2",
    }
);
const isCollapse = ref(false);
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
};

const toggle=()=>{
    isCollapse.value=!isCollapse.value;
    if(isCollapse.value){
        widthRef.value=100;
    }else{
        widthRef.value=200;
    }
}

let menuObjRef =ref([
    {
        name: "route-1",
        path: "dirL1",
        icon: "el-icon-edit",
        title: "title-1",
        children: [
            {
                name: "route-1-1",
                path: "dirL2",
                icon: "el-icon-edit",
                title: "title-1-1",
            }],
    },
    {
        name: "route-2",
        path: "dirL2",
        icon: "el-icon-edit",
        title: "title-2",
    }
]);


</script>

<style>
.el-menu-vertical-demo{
    font-weight: 500;
    font-size: 4em;
    /* width: 200px; */
    height: 400px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    /* min-height: 400px; */
}
</style>
